<template>
  <div class="home-wrap">
    <div class="home-content">
      <span class="back-arrow" @click="backHome()"></span>
      <div class="home-head">
        <div style="text-align: center;color: #3F2900;font-size: 30px;">
          高效语法
        </div>
        <div style="display: flex;justify-content: center;margin-top: 20px;">
          <div class="boxs" @click.stop="goCheckCourse">
            <img alt="" height="30" src="@/assets/home/qiehuan.png" width="30" @click="goCheckCourse"/>
            <span style=" cursor: pointer;
        font-size: 20px;">{{ "请选择专题" }}</span>
          </div>
        </div>
      </div>
      <div class="home-center">
        <div class="study-left">
          <p @click="goGrammarStudy('0')">
            <span>今日学习</span>
            <span class="bs1">{{ chapterDetail.today_num }} <i>句</i></span>
          </p>
          <p @click="goGrammarStudy('1')">
            <span>累计学习</span>
            <span class="bs1">{{ chapterDetail.total_learning }} <i>句</i></span>
          </p>
        </div>
        <div class="study-check">
          <div
              :class="{
              'animat-step1': animat === 1,
            }"
              class="rotate-wrap"
          >
            <div class="grid-circle grid-circle1"></div>
            <div
                :class="{
                'animat-step1': animat === 1,
              }"
                class="reverse-star reverse-star1"
                @click="goReview('1')"
            >
              <img alt="" src="@/assets/yf_img/yf_btn_dhk_blue.png"/>
              <span>{{ chapterDetail.green }}</span>
            </div>
            <div
                :class="{
                'animat-step1': animat === 1,
              }"
                class="reverse-star reverse-star2"
                @click="goGrammarCheck"

            >
              <img alt="" src="@/assets/yf_img/yf_btn_dhk_green.png"/>
              <span>{{ chapterDetail.red }}</span>
            </div>
            <div
                :class="{
                'animat-step1': animat === 1,
              }"
                class="reverse-star reverse-star4"
                @click="goReview('2')"
            >
              <img alt="" src="@/assets/yf_img/yf_btn_dhk_red.png"/>
              <span>{{ chapterDetail.yellow }}</span>
            </div>
            <div
                :class="{
                'animat-step1': animat === 1,
              }"
                class="reverse-star reverse-star3"
                @click="goReview('3')"
            >
              <img alt="" src="@/assets/yf_img/yf_btn_dhk_purple.png"/>
              <span>{{ chapterDetail.purple }}</span>
            </div>
          </div>
          <div
              :class="{
              'animat-step2': animat === 2,
            }"
              class="check-start"
              @click="startClickHandle"
          >
            <!--START-->
          </div>
        </div>
        <div class="study-right">
          <p>
            <span>学习时长</span>
            <span class="bs1">{{ chapterDetail.total_time }} <i>m</i></span>
          </p>
          <p>
            <span>句子总数</span>
            <span class="bs1">{{ chapterDetail.total_sentence }} <i>句</i></span>
          </p>
        </div>
      </div>
      <p class="home-bottom">
        <a @click="goSkill">
          <img alt="" src="@/assets/yf_img/yf_btn_kdjd.png">
        </a>
        <a @click="moreClickHandle">
          <img alt="" src="@/assets/yf_img/yf_btn_zxxl.png">
        </a>
      </p>
    </div>
<!--    <checkModal :visible.sync="checkModalVisible" @ok="goCheckCourse"/>-->
<!--    <moreModal-->
<!--        :level="chapterDetail.level"-->
<!--        :visible.sync="moreModalVisible"-->
<!--        @choseClick="grammarChose"-->
<!--    />-->
  </div>
</template>
<script>
// import {fetchChapterDetail, fetchLastChapter, fetchRatioSentence,} from "@/api/reverse";
// import checkModal from "./checkModal";
// import moreModal from "./moreModal";
// import {SUCCESS_CODE} from "@/utils/const";
// import {mapMutations, mapState} from "vuex";
// import _ from "lodash";
// import Caozuozhinan from "../../../components/Caozuozhinan";
// import storage from '../../../utils/storage.js'

import {fetchLastChapter} from "@/api/reverse";

export default {
  name: "reverse",
  components: {
  },
  data() {
    return {
      brand_info: null,
      animat: "",
      chapterDetail: {},
      checkModalVisible: false,
      moreModalVisible: false,
      isBack: false,
      isEmpty: false,
      brank_skin: null,
      brank_logo: '',
      air_yf_page_style: '',
    };
  },
  async created() {
    // await this.fetchLastChapter();
  },
  computed: {
  },
  methods: {
    startClickHandle() {
      this.animat = 1;
      // this.$router
      //     .push({
      //       path: "/reverse/grammar-check",
      //       query: {
      //         // chapter_id: this.reverseStatus.chapters_id,
      //         // curr_id: this.reverseStatus.curr_id,
      //       },
      //     })
      //     .catch(() => {
      //     });
      // setTimeout(() => {
      //   this.animat = 0
      //   if (this.isEmpty) {
      //     this.checkModalVisible = true
      //     this.$loading.hide()
      //   } else {
      //     this.fetchRatioSentence();
      //   }
      // }, 600);
    },
    fetchRatioSentence() {
      fetchRatioSentence({
        chapter_id: this.reverseStatus.chapters_id,
        curr_id: this.reverseStatus.curr_id,
      }).then((res) => {
        this.$loading.hide()
        if (res.code === SUCCESS_CODE) {
          if (Array.isArray(res.data.list)) {
            let list = res.data.list.map((v) => {
              return Object.assign(v, {clickNum: 0});
            });
            let sentenceList = Object.assign(res.data, {list});
            this.setSentenceList(sentenceList);
          }
          if (+res.data.type === 1) {
            // 去绿格
            this.$yxpConfirm({
              msg: "恭喜你完成本专题的学习，请找过关老师检测！",
            }).then(() => {
              this.$router
                  .push({
                    path: "/reverse/grammar-check",
                    query: {
                      chapter_id: this.reverseStatus.chapters_id,
                      curr_id: this.reverseStatus.curr_id,
                    },
                  })
                  .catch(() => {
                  });
            });
          }
          if (+res.data.type === 3) {
            console.log(res.data.url);
            this.$router.push({
              path: "/reverse/winding-report",
              query: {
                reportUrl: res.data.url,
              },
            });
          }
          if (+res.data.type === 0) {
            // 0 且test为空跳转句子列表，test不为空
            if (!res.data.test.length) {
              this.$router.push({
                path: "/reverse/grammar-sentence",
                query: {
                  chapter_id: this.reverseStatus.chapters_id,
                  curr_id: this.reverseStatus.curr_id,
                  name: this.reverseStatus.name,
                },
              });
            } else {
              this.$router.push({
                path: "/reverse/group-test",
                query: {index: true},
              });
            }
          }
        }
      }).catch(() => {
        this.$loading.hide()
      });
    },
    async fetchLastChapter() {
      let {chapters_id, curr_id, name, pack_name} = this.$route.query;
      if (chapters_id && curr_id) {
        this.fetchChapterDetail({chapters_id, curriculum_id: curr_id});
      } else {
        await fetchLastChapter().then((res) => {
          console.log(res, '-=-=-=-')
          if (res.code === 'SUCCESS_CODE') {
            if (!_.get(res.data, "chapters_id", "")) {
              if (!_.get(res.data, "curriculum_id", "")) {
                // 如果没带参数过来 才弹框，课程仅是选择并不会记录到上次学习
                console.log('1111')
                this.setReverseStatus({})
                this.isEmpty = true
                if (!this.isBack) {
                  this.checkModalVisible = true;
                }
              }
            } else {
              this.setReverseStatus({
                chapters_id: _.get(res.data, "chapters_id", ""),
                curr_id: _.get(res.data, "curriculum_id", ""),
                name: _.get(res.data, "name", ""),
                pack_name: _.get(res.data, "pack_name", ""),
              });
              this.fetchChapterDetail({
                chapters_id: _.get(res.data, "chapters_id", ""),
                curriculum_id: _.get(res.data, "curriculum_id", ""),
              });
            }
          }
        });
      }
    },
    moreClickHandle() {
      if (this.isEmpty) {
        this.checkModalVisible = true
      } else {
        this.moreModalVisible = true
      }
    },
    fetchChapterDetail(data) {
      fetchChapterDetail(data).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.chapterDetail = res.data;
          this.setReverseStatus(
              Object.assign(this.reverseStatus, {level: res.data.level})
          );
        }
      });
    },
    goGrammarCheck() {
      console.log(123)
      this.$router.push({
        path: "/reverse/grammar-check",
        // query: {
        //   chapter_id: this.reverseStatus.chapters_id,
        //   curr_id: this.reverseStatus.curr_id,
        // },
      });
    },
    async goGrammarStudy(type) {
      // 0 今日， 1 累计
      // let num =
      //     type === "0"
      //         ? this.chapterDetail.today_num
      //         : this.chapterDetail.total_learning;
      // if (!num) {
      //   await this.$yxpConfirm({
      //     type: "alert",
      //     msg: "本章节今天您还没有学习",
      //   });
      //   return;
      // }

      this.$router.push({
        path: "/reverse/grammar-study",
        query: {
          // chapter_id: this.reverseStatus.chapters_id,
          // curr_id: this.reverseStatus.curr_id,
          type: type,
        },
      });
    },
    goReview(type) {
      this.$router.push({
        path: "/reverse/grammar-review",
        query: {
          type: type,
        },
      });
    },
    goCheckCourse() {
      // this.checkModalVisible = false;
      this.$router.push({
        path: "/reverse/choseCourse",
        query: {
          chapter_id: this.reverseStatus.chapters_id,
          curr_id: this.reverseStatus.curr_id,
          title: this.reverseStatus.pack_name,
        },
      });
    },
    grammarChose(type) {
      if (type === "1") {
        this.$router.push({
          path: "/reverse/grammar-blank",
          query: {
            type: type,
          },
        });
      } else {
        this.$router.push({
          path: "/reverse/grammar-mistake",
          query: {
            type: type,
          },
        });
      }
      this.moreModalVisible = false;
    },
    goSkill() {
      if (this.reverseStatus.chapters_id) {
        this.setGrammarExplain(true);
      } else {
        this.$message.error('请选择专题~')
      }
    },
    backHome() {
        this.$router.push({
          path: '/work/studytype'
        })
    },
  },
  mounted() {
  },
};
</script>
<style >
.home-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
  align-items: center;
  background-image: url("@/assets/home/index-bg.png");
  background-repeat: no-repeat;
  box-sizing: border-box;
  background-size: cover;
}
.home-wrap .boxs {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ccc;
  width: 225px;
  border-radius: 10px;
}
.home-wrap .home-content {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 15px 0 25px;
  background: #fff;
  box-shadow: 0px 3px 30px rgba(22, 131, 18, 0.16);
  border-radius: 20px;
}
.home-wrap .home-content .back-arrow {
  position: absolute;
  left: 30px;
  top: 30px;
  font-size: 24px;
  width: 30px;
  height: 27px;
  background-image: url("@/assets/home/btn_back.png");
  background-size: 100%;
  cursor: pointer;
}
.home-wrap .home-content .home-head {
  margin-bottom: 15px;
}
.home-wrap .home-content .home-head .checkcourse-title span {
  cursor: pointer;
}
.home-wrap .home-center {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}
.home-wrap .study-check {
  position: relative;
  width: 560px;
  height: 560px;
}
.home-wrap .study-check .rotate-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: url("@/assets/yf_img/yf_xbg.png");
  transform: translate3d(0, 0, 0);
  background-size: 100%, 100%;
}
.home-wrap .study-check .rotate-wrap.animat-step1 {
  animation-duration: 0.6s;
}
.home-wrap .study-check .grid-circle {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0);
  color: #fff;
  text-align: center;
  font-weight: bold;
}
.home-wrap .study-check .check-start {
  position: absolute;
  width: 170px;
  height: 170px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("@/assets/yf_img/yf_start.png");
  background-size: cover;
  color: #fff;
  font-weight: bold;
  font-size: 33px;
  line-height: 170px;
  cursor: pointer;
}
.home-wrap .study-check .grid-circle1 {
  width: 560px;
  height: 560px;
}
.home-wrap .study-check .grid-circle2 {
  width: 460px;
  height: 460px;
}
.home-wrap .study-check .grid-circle3 {
  width: 360px;
  height: 360px;
}
.home-wrap .study-check .grid-circle4 {
  width: 260px;
  height: 260px;
}
.home-wrap .study-check .reverse-star {
  position: absolute;
  cursor: pointer;
}
.home-wrap .study-check .reverse-star.animat-step1 {
  animation-duration: 0.6s;
}
.home-wrap .study-check .reverse-star img {
  width: 100%;
  height: 100%;
}
.home-wrap .study-check .reverse-star span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 23px;
  color: #000;
  font-weight: bold;
}
.home-wrap .study-check .reverse-star.reverse-star1 span {
  left: 46%;
  top: 46%;
}
.home-wrap .study-check .reverse-star.reverse-star2 span {
  left: 49%;
  top: 46%;
}
.home-wrap .study-check .reverse-star.reverse-star3 span {
  left: 52%;
  top: 46%;
}
.home-wrap .study-check .reverse-star.reverse-star4 span {
  left: 55%;
  top: 46%;
}
.home-wrap .study-check .reverse-star1 {
  width: 112px;
  height: 66px;
  right: -30px;
  top: 154px;
}
.home-wrap .study-check .reverse-star2 {
  width: 112px;
  height: 66px;
  right: -25px;
  bottom: 223px;
}
.home-wrap .study-check .reverse-star3 {
  width: 112px;
  height: 66px;
  left: -33px;
  top: 153px;
}
.home-wrap .study-check .reverse-star4 {
  width: 112px;
  height: 66px;
  left: -26px;
  bottom: 225px;
}
.home-wrap .study-left,
.home-wrap .study-right {
  text-align: center;
  position: relative;
  width: 158px;
  height: 243px;
  background-image: url('@/assets/yf_img/yf_wzbg.png');
  background-size: 100%,100%;
  background-repeat: no-repeat;
}
.home-wrap .study-left p,
.home-wrap .study-right p {
  position: absolute;
  border-radius: 10px;
  width: 87%;
  left: 9px;
  font-size: 12px;
}
.home-wrap .study-left p span,
.home-wrap .study-right p span {
  display: block;
}
.home-wrap .study-left p span i,
.home-wrap .study-right p span i {
  font-style: normal;
  font-size: 12px;
}
.home-wrap .study-left p span:nth-child(1),
.home-wrap .study-right p span:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
}
.home-wrap .bs1 {
  background-image: url("@/assets/yf_img/yf_wzxbg.png");
  background-size: 100%,100%;
  background-repeat: no-repeat;
  height: 37px;
  font-size: 20px;
  line-height: 37px;
}
.home-wrap .study-left {
  color: #8F4E00;
}
.home-wrap .study-left p:nth-child(1) {
  top: 44px;
}
.home-wrap .study-left p:nth-child(2) {
  bottom: 40px;
}
.home-wrap .study-right {
  color: #8F4E00;
}
.home-wrap .study-right p:nth-child(1) {
  top: 44px;
}
.home-wrap .study-right p:nth-child(2) {
  bottom: 40px;
}
.home-wrap .home-bottom {
  padding: 0 60px;
  display: flex;
  font-size: 20px;
  justify-content: space-between;
  position: absolute;
  right: 27px;
  top: 33px;
}
@keyframes step1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes step1Text {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes step2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@media screen and (min-width: 1620px) {
  .home-wrap .home-content {
    width: 1300px;
    height: 750px;
    padding: 25px 0;
  }
  .home-wrap .study-check {
    width: 560px;
    height: 560px;
  }
  .home-wrap .study-check .grid-circle1 {
    width: 560px;
    height: 560px;
  }
  .home-wrap .study-check .grid-circle2 {
    width: 460px;
    height: 460px;
  }
  .home-wrap .study-check .grid-circle3 {
    width: 360px;
    height: 360px;
  }
  .home-wrap .study-check .grid-circle4 {
    width: 260px;
    height: 260px;
  }
  .home-wrap .study-check .check-start {
    width: 260px;
    height: 240px;
    line-height: 170px;
  }
  .home-wrap .study-check .reverse-star1 {
    width: 112px;
    height: 66px;
    right: -30px;
    top: 154px;
  }
  .home-wrap .study-check .reverse-star2 {
    width: 112px;
    height: 66px;
    right: -25px;
    bottom: 223px;
  }
  .home-wrap .study-check .reverse-star3 {
    width: 112px;
    height: 66px;
    left: -33px;
    top: 153px;
  }
  .home-wrap .study-check .reverse-star4 {
    width: 112px;
    height: 66px;
    left: -26px;
    bottom: 225px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1620px) {
  .home-wrap .home-content {
    width: 1150px;
    height: 650px;
    padding: 22px 0;
  }
  .home-wrap .study-check {
    width: 486px;
    height: 486px;
  }
  .home-wrap .study-check .grid-circle1 {
    width: 486px;
    height: 486px;
  }
  .home-wrap .study-check .grid-circle2 {
    width: 406px;
    height: 406px;
  }
  .home-wrap .study-check .grid-circle3 {
    width: 326px;
    height: 326px;
  }
  .home-wrap .study-check .grid-circle4 {
    width: 246px;
    height: 246px;
  }
  .home-wrap .study-check .check-start {
    width: 210px;
    height: 193px;
    line-height: 138px;
    font-size: 25px;
  }
  .home-wrap .study-check .reverse-star1 {
    width: 97px;
    height: 60px;
    right: -32px;
    top: 129px;
  }
  .home-wrap .study-check .reverse-star2 {
    width: 97px;
    height: 60px;
    right: -21px;
    bottom: 194px;
  }
  .home-wrap .study-check .reverse-star3 {
    width: 97px;
    height: 60px;
    left: -35px;
    top: 132px;
  }
  .home-wrap .study-check .reverse-star4 {
    width: 97px;
    height: 60px;
    left: -24px;
    bottom: 195px;
  }
}
@media screen and (max-width: 1200px) {
  .home-wrap .home-content {
    width: 900px;
    height: 500px;
  }
  .home-wrap .study-check {
    width: 354px;
    height: 354px;
  }
  .home-wrap .study-check .grid-circle1 {
    width: 354px;
    height: 354px;
  }
  .home-wrap .study-check .grid-circle2 {
    width: 294px;
    height: 294px;
  }
  .home-wrap .study-check .grid-circle3 {
    width: 234px;
    height: 234px;
  }
  .home-wrap .study-check .grid-circle4 {
    width: 174px;
    height: 174px;
  }
  .home-wrap .study-check .check-start {
    width: 156px;
    height: 137px;
    line-height: 102px;
    font-size: 19px;
  }
  .home-wrap .study-check .reverse-star1 {
    width: 70px;
    height: 50px;
    right: -19px;
    top: 88px;
  }
  .home-wrap .study-check .reverse-star2 {
    width: 70px;
    height: 50px;
    right: -16px;
    bottom: 141px;
  }
  .home-wrap .study-check .reverse-star3 {
    width: 70px;
    height: 50px;
    left: -17px;
    top: 90px;
  }
  .home-wrap .study-check .reverse-star4 {
    width: 70px;
    height: 50px;
    left: -13px;
    bottom: 143px;
  }
}
.home-wrap.home-wrap-skin-1 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
  align-items: center;
  background-image: url("@/assets/read_v2/fjyd_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.home-wrap.home-wrap-skin-1 .meta-cards {
  width: 160px;
  background: #fff;
}
.home-wrap.home-wrap-skin-1 .meta-cards .card-item {
  margin-top: 100px;
}
.home-wrap.home-wrap-skin-1 .meta-cards .card-item .text {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #6fa679;
}
.home-wrap.home-wrap-skin-1 .meta-cards .card-item .value {
  text-align: center;
  display: block;
  font-size: 21px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("@/assets/yufa_v2/gxyf_xbg.png");
  height: 50px;
  line-height: 50px;
  color: #3a8046;
}
.home-wrap.home-wrap-skin-1 .skin-1-genghuanzhuanti {
  display: inline-block;
  color: #0b5f1b;
  font-size: 18px;
  position: absolute;
  right: 16rem;
  top: 2.18rem;
}
.home-wrap.home-wrap-skin-1 .skin-1-genghuanzhuanti img {
  width: 23px;
}
.home-wrap.home-wrap-skin-1 .home-content {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 15px 0 25px;
  box-shadow: 0px 3px 30px rgba(22, 131, 18, 0.16);
  border-radius: 20px;
  background-color: transparent;
  background-image: url("@/assets/yufa_v2/yufa_bg_mini.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.home-wrap.home-wrap-skin-1 .home-content:after {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 8px solid #D6FFDB;
  background: linear-gradient(0deg, #6AEA76 1%, #43D451 100%);
  box-shadow: 0px 3px 5px 0px rgba(157, 193, 239, 0.4);
  border-radius: 10px;
  z-index: -1;
}
.home-wrap.home-wrap-skin-1 .home-content .back-arrow {
  position: absolute;
  left: 50px;
  top: 50px;
  font-size: 24px;
  height: 27px;
  width: 20px;
  background-image: url("@/assets/read_v2/fjyd_icon_fanhui.png");
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.home-wrap.home-wrap-skin-1 .home-content .home-head {
  margin-bottom: 15px;
}
.home-wrap.home-wrap-skin-1 .home-content .home-head .checkcourse-title {
  display: inline-block;
  border-radius: 10px;
  text-align: center;
}
.home-wrap.home-wrap-skin-1 .home-content .home-head .checkcourse-title span {
  box-sizing: border-box;
  padding: 10px;
  width: 330px;
  display: inline-block;
  border-radius: 3px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
.home-wrap.home-wrap-skin-1 .learning-meta {
  width: 80px;
  height: 80px;
  background: #8df4e0;
  position: relative;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item {
  position: relative;
  text-align: center;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item .text {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item .label {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  display: none;
  height: 100%;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item img {
  display: block;
  width: 170px;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item.green {
  position: absolute;
  display: inline-block;
  top: 100%;
  left: 100%;
  margin-right: -1rem;
  width: 180px;
  height: 150px;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item.yellow {
  position: absolute;
  display: inline-block;
  top: 100%;
  right: 100%;
  margin-left: -1rem;
  width: 180px;
  height: 150px;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item.orange {
  position: absolute;
  display: inline-block;
  bottom: 100%;
  left: 100%;
  margin-top: -1rem;
  width: 180px;
  height: 150px;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item.red {
  position: absolute;
  display: inline-block;
  right: 100%;
  bottom: 100%;
  margin-left: -1rem;
  width: 180px;
  height: 150px;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item.start {
  position: absolute;
  margin-top: -100px;
  margin-left: -100px;
  top: 50%;
  left: 50%;
}
.home-wrap.home-wrap-skin-1 .learning-meta .meta-item.start img {
  width: 200px;
}
.home-wrap.home-wrap-skin-1 .learning-meta-wrap img {
  width: 100px;
}
.home-wrap.home-wrap-skin-1 .home-center {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
}
.home-wrap.home-wrap-skin-1 .home-bottom-skin-1 {
  display: block;
  width: 100%;
}
.home-wrap.home-wrap-skin-1 .home-bottom-skin-1 .skin-1-bottom-items {
  padding: 0 60px;
  display: flex;
  font-size: 20px;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
}
.home-wrap.home-wrap-skin-1 .home-bottom-skin-1 .skin-1-bottom-items img {
  width: 180px;
}
.home-wrap.home-wrap-skin-1 .study-check {
  position: relative;
  width: 560px;
  height: 560px;
}
.home-wrap.home-wrap-skin-1 .study-check .rotate-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, 0);
  animation: step1 35s linear infinite;
}
.home-wrap.home-wrap-skin-1 .study-check .rotate-wrap.animat-step1 {
  animation-duration: 0.6s;
}
.home-wrap.home-wrap-skin-1 .study-check .grid-circle {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0);
  color: #fff;
  text-align: center;
  font-weight: bold;
  border: 1px dashed #dddddd;
}
.home-wrap.home-wrap-skin-1 .study-check .check-start {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
  color: #fff;
  font-weight: bold;
  font-size: 33px;
  line-height: 170px;
  cursor: pointer;
  animation: step2 2s linear infinite;
}
.home-wrap.home-wrap-skin-1 .study-check .grid-circle1 {
  width: 560px;
  height: 560px;
}
.home-wrap.home-wrap-skin-1 .study-check .grid-circle2 {
  width: 460px;
  height: 460px;
}
.home-wrap.home-wrap-skin-1 .study-check .grid-circle3 {
  width: 360px;
  height: 360px;
}
.home-wrap.home-wrap-skin-1 .study-check .grid-circle4 {
  width: 260px;
  height: 260px;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star {
  position: absolute;
  cursor: pointer;
  animation: step1Text 35s linear infinite;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star.animat-step1 {
  animation-duration: 0.6s;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star img {
  width: 100%;
  height: 100%;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star.reverse-star1 span {
  left: 52%;
  top: 46%;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star.reverse-star2 span {
  left: 55%;
  top: 51%;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star.reverse-star3 span {
  left: 52%;
  top: 46%;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star.reverse-star4 span {
  left: 55%;
  top: 50%;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star1 {
  width: 91px;
  height: 81px;
  right: 23px;
  top: 94px;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star2 {
  width: 88px;
  height: 68px;
  right: 91px;
  bottom: 59px;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star3 {
  width: 77px;
  height: 66px;
  left: 106px;
  top: 129px;
}
.home-wrap.home-wrap-skin-1 .study-check .reverse-star4 {
  width: 57px;
  height: 55px;
  left: 44px;
  bottom: 134px;
}
.home-wrap.home-wrap-skin-1 .home-bottom {
  padding: 0 60px;
  display: flex;
  font-size: 20px;
  justify-content: space-between;
}
@keyframes step1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes step1Text {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes step2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@media screen and (min-width: 1620px) {
  .home-wrap.home-wrap-skin-1 .home-content {
    width: 1300px;
    height: 750px;
    padding: 25px 0;
  }
  .home-wrap.home-wrap-skin-1 .study-check {
    width: 560px;
    height: 560px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle1 {
    width: 560px;
    height: 560px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle2 {
    width: 460px;
    height: 460px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle3 {
    width: 360px;
    height: 360px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle4 {
    width: 260px;
    height: 260px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .check-start {
    width: 170px;
    height: 170px;
    line-height: 170px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star1 {
    width: 91px;
    height: 81px;
    right: 23px;
    top: 94px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star2 {
    width: 88px;
    height: 68px;
    right: 91px;
    bottom: 59px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star3 {
    width: 77px;
    height: 66px;
    left: 106px;
    top: 129px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star4 {
    width: 57px;
    height: 55px;
    left: 44px;
    bottom: 134px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1620px) {
  .home-wrap.home-wrap-skin-1 .home-content {
    width: 1150px;
    height: 650px;
    padding: 22px 0;
  }
  .home-wrap.home-wrap-skin-1 .study-check {
    width: 486px;
    height: 486px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle1 {
    width: 486px;
    height: 486px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle2 {
    width: 406px;
    height: 406px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle3 {
    width: 326px;
    height: 326px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle4 {
    width: 246px;
    height: 246px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .check-start {
    width: 138px;
    height: 138px;
    line-height: 138px;
    font-size: 25px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star1 {
    width: 80px;
    height: 70px;
    right: 19px;
    top: 81px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star2 {
    width: 77px;
    height: 60px;
    right: 78px;
    bottom: 50px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star3 {
    width: 68px;
    height: 59px;
    left: 91px;
    top: 112px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star4 {
    width: 50px;
    height: 47px;
    left: 38px;
    bottom: 116px;
  }
}
@media screen and (max-width: 1200px) {
  .home-wrap.home-wrap-skin-1 .home-content {
    width: 900px;
    height: 500px;
  }
  .home-wrap.home-wrap-skin-1 .study-check {
    width: 354px;
    height: 354px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle1 {
    width: 354px;
    height: 354px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle2 {
    width: 294px;
    height: 294px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle3 {
    width: 234px;
    height: 234px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .grid-circle4 {
    width: 174px;
    height: 174px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .check-start {
    width: 102px;
    height: 102px;
    line-height: 102px;
    font-size: 19px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star1 {
    width: 57px;
    height: 50px;
    right: 10px;
    top: 60px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star2 {
    width: 57px;
    height: 44px;
    right: 57px;
    bottom: 37px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star3 {
    width: 49px;
    height: 42px;
    left: 67px;
    top: 82px;
  }
  .home-wrap.home-wrap-skin-1 .study-check .reverse-star4 {
    width: 36px;
    height: 34px;
    left: 28px;
    bottom: 85px;
  }
}
@media screen and (min-width: 1620px) {
  .home-wrap {
    min-height: 750px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1620px) {
  .home-wrap {
    min-height: 650px;
  }
}
@media screen and (max-width: 1200px) {
  .home-wrap {
    min-height: 600px;
  }
}

</style>